<template>
  <view class="rec-list">
    <scroll-view scroll-x>
      <view class="list">
        <view class="list-item" v-for="(item ,index) in list" :key="index">
          <view class="icon-box">
            <text class="iconfont" :class="item.icon"></text>
          </view>
          <view>{{item.tit}}</view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
const list = [
  {
    tit:'每日推荐',
    icon:'icon-rili'
  },
  {
    tit:'私人FM',
    icon:'icon-shouyinji'
  },
  {
    tit:'歌单®',
    icon:'icon-gedan'
  },
  {
    tit:'排行榜',
    icon:'icon-paihangbang'
  },
  {
    tit:'直播',
    icon:'icon-zhibo'
  },
  {
    tit:'电台',
    icon:'icon-diantai'
  },



]



export default {
  data() {
    return {
      list
    }
  },

};
</script>

<style lang="scss">
.rec-list{
  padding: 0 20rpx;
}
.list {
  white-space: nowrap;
  display: inline-block;
  .list-item {
    display: inline-block;
    text-align: center;
    margin-right: 38rpx;
    .icon-box {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      display: flex;
      align-items: center;
      background-color: #2d2d2d;
      justify-content: center;
      margin: auto;
      margin-bottom: 10rpx;
      text {
        color: #fd3a3e;
        font-size: 60rpx;
      }
    }
  }
}
</style>